<template>
  <div class="aui-content">
    <div class="aui-container">
      <div class="aui-form">
        <div class="aui-image">
          <div class="aui-image-text">
            <img :src="adTextImg" alt="" />
          </div>
        </div>
        <div class="aui-formBox aui-formEwm">
          <div class="aui-formWell">
            <form>
              <div
                class="aui-flex aui-form-nav investment_title"
                style="padding-bottom: 19px"
              >
                <div class="aui-flex-box activeNav">
                  {{ t("sys.login.qrSignInFormTitle") }}
                </div>
              </div>
              <div class="aui-form-box">
                <div class="aui-account" style="padding: 30px 0">
                  <div class="aui-ewm">
                    <QrCode
                      :value="qrCodeUrl"
                      class="enter-x flex justify-center xl:justify-start"
                      :width="280"
                    />
                  </div>
                </div>
              </div>
              <div class="aui-formButton">
                <a class="aui-linek-code aui-link-register" @click="goBackHandleClick">{{
                  t("sys.login.backSignIn")
                }}</a>
              </div>
            </form>
          </div>
          <div class="aui-flex aui-third-text">
            <div class="aui-flex-box aui-third-border">
              <span>{{ t("sys.login.otherSignIn") }}</span>
            </div>
          </div>
          <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
            <div class="aui-flex-box">
              <div class="aui-third-login">
                <a href="" title="github" @click="onThirdLogin('github')"
                  ><GithubFilled
                /></a>
              </div>
            </div>
            <div class="aui-flex-box">
              <div class="aui-third-login">
                <a href="" title="企业微信" @click="onThirdLogin('wechat_enterprise')"
                  ><icon-font class="item-icon" type="icon-qiyeweixin3"
                /></a>
              </div>
            </div>
            <div class="aui-flex-box">
              <div class="aui-third-login">
                <a href="" title="钉钉" @click="onThirdLogin('dingtalk')"
                  ><DingtalkCircleFilled
                /></a>
              </div>
            </div>
            <div class="aui-flex-box">
              <div class="aui-third-login">
                <a href="" title="微信" @click="onThirdLogin('wechat_open')"
                  ><WechatFilled
                /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 第三方登录相关弹框 -->
</template>

<script lang="ts" setup name="mini-code-login">
import { ref, onUnmounted } from "vue";
import { getLoginQrcode, getQrcodeToken } from "/@/api/sys/user";
import { useUserStore } from "/@/store/modules/user";
import { QrCode } from "/@/components/Qrcode/index";

import logoImg from "/@/assets/loginmini/icon/jeecg_logo.png";
import adTextImg from "/@/assets/loginmini/icon/jeecg_ad_text.png";
import { useI18n } from "/@/hooks/web/useI18n";
import { useDesign } from "/@/hooks/web/useDesign";
import {
  GithubFilled,
  WechatFilled,
  DingtalkCircleFilled,
  createFromIconfontCN,
} from "@ant-design/icons-vue";

const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2316098_umqusozousr.js",
});
const { prefixCls } = useDesign("minilogin");
const { t } = useI18n();
const qrCodeUrl = ref<string>("");
let timer: IntervalHandle;
const state = ref("0");
const thirdModalRef = ref();
const userStore = useUserStore();
const emit = defineEmits(["go-back", "success", "register"]);

//加载二维码信息
function loadQrCode() {
  state.value = "0";
  getLoginQrcode().then((res) => {
    qrCodeUrl.value = res.qrcodeId;
    if (res.qrcodeId) {
      openTimer(res.qrcodeId);
    }
  });
}
//监控扫码状态
function watchQrcodeToken(qrcodeId) {
  getQrcodeToken({ qrcodeId: qrcodeId }).then((res) => {
    let token = res.token;
    if (token == "-2") {
      //二维码过期重新获取
      loadQrCode();
      clearInterval(timer);
    }
    //扫码成功
    if (res.success) {
      state.value = "2";
      clearInterval(timer);
      setTimeout(() => {
        userStore.qrCodeLogin(token);
      }, 500);
    }
  });
}

/** 开启定时器 */
function openTimer(qrcodeId) {
  watchQrcodeToken(qrcodeId);
  closeTimer();
  timer = setInterval(() => {
    watchQrcodeToken(qrcodeId);
  }, 1500);
}

/** 关闭定时器 */
function closeTimer() {
  if (timer) clearInterval(timer);
}

/**
 * 第三方登录
 * @param type
 */
function onThirdLogin(type) {
  thirdModalRef.value.onThirdLogin(type);
}

/**
 * 初始化表单
 */
function initFrom() {
  loadQrCode();
}

/**
 * 返回
 */
function goBackHandleClick() {
  emit("go-back");
  closeTimer();
}

onUnmounted(() => {
  closeTimer();
});

defineExpose({
  initFrom,
});
</script>
<style lang="less" scoped>
@import "/@/assets/loginmini/style/home.less";
@import "/@/assets/loginmini/style/base.less";
</style>
